<template>
  <div class="communityNewsManagement">
    <h3>社区动态管理</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入用户名" v-model="search1">
          <template slot="prepend">用户名</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入用户id" v-model="search2">
          <template slot="prepend">用户id</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>状态</label>
        <el-select v-model="search3" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
       <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="list">
        <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
      <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="序号"
          sortable
          width="80"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="UID"
          width="70"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="用户名"
          width="140"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="话题"
          width="120"
        ></el-table-column>
         <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="类型"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="状态"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="是否置顶"
          width="100"
        ></el-table-column>
         <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="是否精选"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="真实点赞数"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="点赞数"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="创建时间"
          width="150"
          sortable
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="750" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" type="success" @click="handleReviewYes(scope.$index, scope.row)">审核通过</el-button>
            <el-button size="mini" type="danger" @click="handleReviewNo(scope.$index, scope.row)">审核不通过</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleSticky(scope.$index, scope.row)"
            >置顶/取消置顶</el-button>
            <el-button
              size="mini"
              type="warning"
              @click="handleAddFine(scope.$index, scope.row)"
            >加精/取消精选</el-button>
            <el-button size="mini" type="success" @click="handleDeleteDynamic(scope.$index, scope.row)">删除动态</el-button>
            <el-button size="mini" type="danger" @click="handleModify(scope.$index, scope.row)">修改点赞数</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
     <!-- 用户详情弹窗 -->
    <el-dialog title="详情" :visible.sync="centerDialogVisible" width="40%" center>
      <div class="detail">
        <div class="detailBox">
          <div class="detailItem">
            <font>姓名：</font>
            <span>59874</span>
          </div>
          <div class="detailItem">
            <font>话题：</font>
            <span>月度卡</span>
          </div>
          <div class="detailItem">
            <font>内容：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>时间：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>动态图片：</font>
            <span>User_Fq2y8C</span>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 审核不通过 -->
    <el-dialog title="审核不通过" :visible.sync="reviewNoDialogVisible" width="40%" center>
      <div class="reviewNo">
        <span>备注(原因)：</span>
        <textarea v-model="inputReviewNo"></textarea>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitReviewNo">提交</el-button>
        <el-button type="info" size="small" @click="cancelReviewNo">取消</el-button>
      </div>
    </el-dialog>
     <!-- //修改点赞数 -->
    <el-dialog title="修改点赞数" :visible.sync="modifyDialogVisible" width="40%" center>
      <div>
        <span>修改点赞数：</span>
        <el-input placeholder="请输入点赞数" v-model="inputModify" clearable type="number"></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModify">提交</el-button>
        <el-button type="info" size="small" @click="cancelModify">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "communityNewsManagement",
  data() {
    return {
        options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      search1:"",
      search2:"",
      search3:"",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
      currentPage1:1,
      //详情弹窗
      centerDialogVisible:false,
      //审核不通过
      reviewNoDialogVisible:false,
      //显示修改点赞数弹窗
      modifyDialogVisible:false,
    //   审核不通过原因
      inputReviewNo:"",
      //修改的点赞数
      inputModify:"",
      
    };
  },
  mounted() {},
  methods: {
      // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //显示详情弹窗
    handleDetail(index,row){
        this.centerDialogVisible=true;
    },
    //审核通过
    handleReviewYes(index,row){},
    //审核不通过
    handleReviewNo(index,row){
        this.reviewNoDialogVisible=true;
    },
    //置顶/取消置顶
    handleSticky(index,row){},
    //加精/取消精选
    handleAddFine(index,row){},
    //删除动态
    handleDeleteDynamic(index,row){
        this.$confirm('是否要删除该动态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

    },
    //修改点赞数
    handleModify(index,row){
        this.modifyDialogVisible=true;
    },
    //审核不通过提交原因
    submitReviewNo(){},
    //取消审核不通过
    cancelReviewNo(){
        this.reviewNoDialogVisible=false;
    },
    //提交修改点赞数
    submitModify(){

    },
    //取消修改点赞数
    cancelModify(){
        this.modifyDialogVisible=false;
    },
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.detail .detailItem {
  width: 100%;
  margin-bottom: 0.1rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.reviewNo{
    display:flex;
    align-items: center;
}
textarea{
    height:1rem;
    width:50%;
    padding:.05rem;
}
</style>